<template>
	<view class="info-content">
		<view class="wrap" v-if="infos.telent">
			<text class="title">教师资质</text>
			<view class="msg">
				<rich-text :nodes="I_telent"></rich-text>
			</view>
		</view>
		<view class="wrap" v-if="infos.exper">
			<text class="title">教师经历</text>
			<view class="msg">
				<rich-text :nodes="I_exper"></rich-text>
			</view>
		</view>
		<view class="wrap" v-if="infos.achive">
			<text class="title">教学成果</text>
			<view class="msg">
				<rich-text :nodes="I_achive"></rich-text>
			</view>
		</view>
		<view class="wrap" v-if="infos.charact">
			<text class="title">教学特点</text>
			<view class="msg">
				<rich-text :nodes="I_charact"></rich-text>
			</view>
		</view>
		<view v-else class="discuss-wrap">这个人很懒，暂无简介~</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// infos: {
				// 	telent: '<p>教师资格证编号</p><p>2016123133125543321445</p>',
				// 	exper: '<p>2019年01月至今</p><p>珠海一中优秀教师</p><p></p><p>2016年01月至2018年10月</p><p>珠海某高中特邀教师</p>',
				// 	achive: '<ol style="padding-left:15px"><li>教师教学成果简述，教师教学成果简述，教师教学成果简述</li><li>教师教学成果简述，教师教学成果简述，教师教学成果简述</li></ol>',
				// 	charact: '<ol style="padding-left:15px"><li>教师教学特点简述，教师教学特点简述，教师教学特点简述。</li><li>教师教学特点简述，教师教学特点简述，教师教学特点简述。</li></ol>'
				// }
			}
		},
		props: {
			infos: Object
		},
		methods: {
			timeFormat(time) {
				return time.replace(/-/, "年").replace(/-/, "月").slice(0, -2)
			}
		},
		computed: {
			// 后台返回的数据，如果只有一个，那就是object格式，如果是多个，就变成了数组形式
			I_telent() {
				if (this.infos.telent) {
					return this.infos.telent.certificate_no && "<p>教师资格证编号</p><p>" + this.infos.telent.certificate_no + "</p>"
				}
				return '暂无~'
			},
			// 教师经历
			I_exper() {
				if (this.infos.exper) {
					if (this.infos.exper.length > 1) {
						return this.infos.exper.map(x => {
							var s_time = this.timeFormat(x.start_time),
								e_time = this.timeFormat(x.end_time)
							return '<p>' + s_time + '至' + e_time + '</p><p>' + x.content + '</p>'
						}).join('')
					} else {
						return '<p>' + this.infos.exper[0].start_time + '至' + this.infos.exper[0].end_time + '</p><p>' + this.infos.exper[
							0].content + '</p>'
					}
				}
				return '暂无~'
			},
			I_achive() {
				if (this.infos.achive) {
					if (this.infos.achive.length > 1) {
						var _html = '<ol style="padding-left:30rpx">';
						this.infos.achive.forEach((x, i) => _html += `<li>${x.content}</li>`)
						return _html + '</ol>'
					} else {
						return this.infos.achive[0].content
					}
				}
				return '暂无~'
			},
			I_charact() {
				if (this.infos.charact) {
					if (this.infos.charact.length > 1) {
						var _html = '<ol style="padding-left:30rpx">';
						this.infos.charact.forEach((x, i) => _html += `<li>${x.content}</li>`)
						return _html + '</ol>'
					} else {
						return this.infos.charact[0].content
					}
				}
				return '暂无~'
			}
		}
	}
</script>

<style scoped>
	.info-content {
		margin: 30upx;
		background: #fff;
		border-radius: 20upx;
	}

	.wrap {
		padding: 30upx;
		border-bottom: 2upx solid #e5e5e5;
	}

	.wrap:last-child {
		border-bottom: none;
	}

	.title {
		font-family: SourceHanSansCN-Bold;
		padding-left: 16upx;
		border-left: 4upx solid #fe9900;
		font-size: 34upx;
		font-weight: bold;
		color: #333;
		letter-spacing: 2upx;
		vertical-align: middle;
	}

	.msg {
		margin-top: 26upx;
		color: #666;
		font-size: 30upx;
	}
	
	.discuss-wrap {
		border-radius: 100upx;
		background: #fff;
		overflow: hidden;
		color: #999999;
		line-height: 80upx;
		text-align: center;
		font-size: 30upx;
	}
</style>
